<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>摇一摇 + socket</title>
    <link rel="icon" type="image/x-icon"  href="/images/logo.png">
    <link rel="stylesheet" href="/stylesheets/common.css">
    <link rel="stylesheet" href="/stylesheets/separate.css">
    <script src="/plugin/vconsole.min.js"></script>
    <!-- socket.io安装完成之后直接在这儿就能用了，不是 public 目录里面的 -->
    <script src="/socket.io/socket.io.js"></script>
    <script src="/plugin/shake.js"></script>
    <script src="/plugin/func.js"></script>
    <script src="/plugin/storage.js"></script>
    <script src="/javascripts/separate.js"></script>
</head>
<body>
    <div class="box info-box" id="infoBox">
        <input class="phone-input" type="text" id="phoneInput" placeholder="请输入手机号">
        <button class="phone-btn" id="phoneBtn">确定</button>
    </div>
    <div class="box start-box hide" id="startBox">
        <div class="username">
            当前编号：<span class="myNum">0</span>号
        </div>
        <div class="username">
            手机号：<span class="myPhone">88888888888</span>
        </div>
        <div class="shake-count">
            剩余时间：<span id="timeDown">0</span>秒
        </div>
        <div class="shake-count">
            总次数：<span id="count">0</span>次
        </div>
        <div class="shake-speed">
            总速度：<span id="speed">0</span>次 / 秒
        </div>
        <div class="shake-pev">
            上一秒：<span id="prevCount">0</span>次
        </div>
    </div>
    <div class="box stop-box" id="stopBox">
        <h1>等待开始<br/>当前编号：<span class="myNum">0</span>号<br/>手机号：<span class="myPhone">88888888888</span><br><button id="resetBtn">重置信息</button></h1>

    </div>
    <div class="box no-shake hide" id="noShake">
        <h1>抱歉，当前设备不支持摇一摇，请朝地上可劲儿摔 !!!<br/>恭喜您，可以换新手机啦，啦啦啦，啦啦啦~ 我是卖报的小行家 ^.^ !!!</h1>
    </div>
</body>
</html>